<script setup lang="ts">
import { inject, computed } from "vue";
import type {
  FormDesignerComponents,
  FormItemPerm
} from "../FormComponentMixin";
const props = defineProps({
  type: {
    type: String,
    default: ""
  },
  mode: {
    type: String,
    default: "normal" //组件模式，free设计模式，normal 编辑模式, read 阅读模式，disable 禁用模式
  }
});

const config = defineModel<FormDesignerComponents>("config");
const perm = inject<Array<FormItemPerm>>("perm") as FormItemPerm[];
const emits = defineEmits(["change"]);
const disabled = computed(() => {
  if (props.mode === "disable") {
    return true;
  }
  return false;
});

const readonly = computed(() => {
  if (props.mode === "read") {
    return true;
  }
  return false;
});

const handleButtonClick = () => {
  if (config.value.props.action.type === "2") {
    eval(config.value.props.event.onClick);
  }
};
</script>

<template>
  <div style="margin-right: 5px; min-width: 70px">
    <el-button
      :type="config.props.type"
      :circle="config.props.circle"
      @click="handleButtonClick"
      :disabled="disabled || readonly"
    >
      {{ config.props.placeholder }}
    </el-button>
  </div>
</template>

<style scoped></style>
